<template>
  <transition name="showHeader">
    <div v-if="visible" class="header-animat">
      <a-layout-header
        v-if="visible"
        :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
        :style="{ padding: '0' }"
      >
        <div v-if="mode === 'sidemenu'" class="header">
          <a-row class="iconWrapper" :gutter="6">
            <a-col :span="2">
              <a-icon
                v-if="device==='mobile'"
                class="trigger"
                :type="collapsed ? 'menu-fold' : 'menu-unfold'"
                @click="toggle"
              />
              <a-icon
                v-else
                class="trigger"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                @click="toggle"
              />
            </a-col>
            <!--暂未启用，隐藏-->
            <!-- <template v-if="false">
              <a-col class="iconImgWrap" @click="handleIconClick">
                <img class="iconPng" :src="IconLap" alt="工具" />
                <span>工作台</span>
              </a-col>
              <a-col class="iconImgWrap">
                <img class="iconPng" :src="IconFlash" alt="工具" />
                <span>监控台</span>
              </a-col>
              <a-col class="iconImgWrap" style="width: 120px;">
                <img class="iconPng" :src="IconTool" alt="工具" />
                <span>系统管理</span>
              </a-col>
            </template> -->
            <!-- <a-col :xs="13" :xl="12" :xxl="15"> -->
            <user-menu></user-menu>
            <!-- </a-col> -->
          </a-row>
        </div>
        <div v-else :class="['top-nav-header-index', theme]">
          <div class="header-index-wide">
            <div class="header-index-left">
              <logo class="top-nav-header" :show-title="device !== 'mobile'" />
              <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
              <a-icon
                v-else
                class="trigger"
                :type="collapsed ? 'menu-fold' : 'menu-unfold'"
                @click="toggle"
              />
            </div>
            <user-menu class="header-index-right"></user-menu>
          </div>
        </div>
      </a-layout-header>
    </div>
  </transition>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../Menu/'
import Logo from '../tools/Logo'
import { mixin } from '@/utils/mixin'
import IconTool from '@/assets/icon_tool.png'
import IconLap from '@/assets/icon_lap.png'
import IconFlash from '@/assets/icon_flash.png'
import { PageView } from '@/layouts'
import SendMes from '@/views/inform/sendMes'

export default {
  name: 'GlobalHeader',
  components: {
    UserMenu,
    SMenu,
    Logo
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      // sidemenu, topmenu
      default: 'sidemenu'
    },
    menus: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark' // light dark
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    device: {
      type: String,
      required: false,
      default: 'desktop'
    }
  },
  data() {
    return {
      visible: true,
      oldScrollTop: 0,
      IconTool,
      IconLap,
      IconFlash
    }
  },
  mounted() {
    document.addEventListener('scroll', this.handleScroll, { passive: true })
  },
  methods: {
    handleScroll() {
      if (!this.autoHideHeader) {
        return
      }

      const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
      if (!this.ticking) {
        this.ticking = true
        requestAnimationFrame(() => {
          if (this.oldScrollTop > scrollTop) {
            this.visible = true
          } else if (scrollTop > 300 && this.visible) {
            this.visible = false
          } else if (scrollTop < 300 && !this.visible) {
            this.visible = true
          }
          this.oldScrollTop = scrollTop
          this.ticking = false
        })
      }
    },
    toggle() {
      this.$emit('toggle')
    },
    handleIconClick() {
      console.log('icon')
      let arr = [
        {
          path: '/inform',
          name: 'inform',
          component: PageView,
          meta: {
            title: '通知公告',
            icon: 'message',
            permission: ['inform']
          },
          redirect: '/inform/sendMes',
          children: [
            {
              path: '/inform/sendMes',
              name: 'sendMes',
              component: SendMes,
              meta: {
                title: '发送通知',
                keepAlive: true,
                permission: ['inform']
              }
            },
            {
              path: '/inform/list',
              name: 'informList',
              component: () => import('@/views/inform/list'),
              meta: {
                title: '消息列表',
                keepAlive: true,
                permission: ['inform']
              }
            }
          ]
        },
        {
          path: '/prewarning',
          redirect: { name: 'prewarning' },
          component: PageView,
          meta: {
            title: '预警',
            icon: 'anticon-yujing iconfont',
            permission: ['prewarning']
          },
          redirect: '/prewarning/rules',
          children: [
            {
              path: '/prewarning/prewarning-rules',
              name: 'prewariningRules',
              component: () => import('@/views/prewarning/rules'),
              meta: {
                title: '预警规则',
                keepAlive: true,
                permission: ['prewarning']
              }
            },
            {
              path: '/prewarning/prewarning-handle',
              name: 'prewariningHandle',
              component: () => import('@/views/prewarning/handle'),
              meta: {
                title: '预警处置',
                keepAlive: true,
                permission: ['prewarning']
              }
            }
          ]
        }
      ]

      const routes = this.$router.options.routes
      console.log('routes', routes)

      routes.map((v, index) => {
        if (v.path === '/') {
          for (let i = v.children.length - 1; i >= 0; i--) {
            v.children.splice(i, 1)
          }
          this.$nextTick(() => {
            arr.map(j => {
              v.children.push(j)
            })
          })
        }
      })
      console.log('router', this.$router)
    }
  },
  beforeDestroy() {
    document.body.removeEventListener('scroll', this.handleScroll, true)
  }
}
</script>

<style lang="less">
@import '../index.less';

.header-animat {
  position: relative;
  z-index: @ant-global-header-zindex;
}
.showHeader-enter-active {
  transition: all 0.25s ease;
}
.showHeader-leave-active {
  transition: all 0.5s ease;
}
.showHeader-enter,
.showHeader-leave-to {
  opacity: 0;
}
</style>

<style lang="less" scoped>
.iconWrapper {
  .iconPng {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    vertical-align: middle;
  }
  span {
    font-size: 18px;
  }
}
.iconImgWrap {
  width: 100px;
  float: left;
  margin-right: 25px;
  transition: all 0.3s;
  cursor: pointer;
  &:hover {
    background-color: rgba(0, 0, 0, 0.025);
  }
}
</style>
